<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper class="scroll-view" scroll-x="true" indicator-dots="true" autoplay="true">
			<swiper-item v-for="item in carousel" :key="item.image">
				<view class="scroll-view">
					<image :src="item.image" class="scroll-view"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 热门超英 -->
		<view class="superhero">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/hot.png"></image>
				<view class="superhero-title-name">热门超英</view>
			</view>
			<!-- 展示列表 -->
			<scroll-view class="superhero-container" scroll-x>
				<view class="superhero-show">
					<view class="superhero-items" v-for="item in superhero" :key="item.id">
						<view class="superhero-item">
							<image class="superhero-items-img" :src="item.cover"></image>
							<view class="superhero-items-name">{{item.name}}</view>
							<star :score="item.score" showscore="1"></star>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热门预告 -->
		<view class="hot-movies">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/interest.png"></image>
				<view class="superhero-title-name">热门预告</view>
			</view>

			<view class="hot-movies-container">
				<video class="hot-movies-item" v-for="item in trailer" :key="item.id" :src="item.trailer" :poster="item.poster"></video>
			</view>

		</view>
		<!-- 猜你喜欢 -->
		<view class="guessULike">
			<!-- 标题 -->
			<view class="superhero-title">
				<image class="superhero-title-img" src="../../static/icon/guess-u-like.png"></image>
				<view class="superhero-title-name">猜你喜欢</view>
			</view>


			<view class="guessULike-item" v-for="like in guessULike" :key="like.id">
				<image class="guessULike-item-img" :src="like.cover"></image>
				<view class="guessULike-item-info">
					<view class="guessULike-item-title">{{like.name}}</view>
					<star :score="like.score" showscore="0"></star>
					<view class="guessULike-item-basicInfo">{{like.basicInfo}}</view>
					<view class="guessULike-item-releaseDate">{{like.releaseDate}}</view>
				</view>
				<view class="guessULike-item-oper" @click="praiseMe()">
					<image class="guessULike-item-oper-img" src="../../static/icon/praise.png"></image>
					<view class="guessULike-item-oper-title">赞一下</view>
					<view :animation="animationData" class="guessULike-item-oper-num">+1</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import star from '../../components/star.vue'
	export default {
		data() {
			return {
				carousel: [],
				superhero: [],
				trailer: [],
				guessULike: [],
				animationData: {}
			}
		},
		onUnload() {
			// 页面卸载的时候清除动画数据
			this.animationData = {}
		},
		onLoad() {
			// 在页面创建的时候创建一个临时的动画对象
			this.animation = uni.createAnimation();
			// 轮播图
			uni.request({
				url: this.$requestUrl + '/superhero/index/carousel/list?qq=',
				method: "POST",
				success: (res) => {
					if (res.data.status = 200) {
						this.carousel = res.data.data;
					}
				}
			});
			// 热门超英
			uni.request({
				url: this.$requestUrl + '/superhero/index/movie/hot?type=superhero&qq=',
				method: "POST",
				success: (res) => {
					if (res.data.status = 200) {
						this.superhero = res.data.data;
					}
				}
			});
			// 热门预告
			uni.request({
				url: this.$requestUrl + '/superhero/index/movie/hot?type=trailer&qq=',
				method: "POST",
				success: (res) => {
					if (res.data.status = 200) {
						this.trailer = res.data.data;
					}
				}
			});
			// 猜你喜欢
			uni.request({
				url: this.$requestUrl + '/superhero/index/guessULike?type=trailer&qq=',
				method: "POST",
				success: (res) => {
					if (res.data.status = 200) {
						this.guessULike = res.data.data;
					}
				}
			});
		},
		methods: {
			praiseMe() {
				// 构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(100).step({
					duration: 400
				});
				// 到处动画到view组件，实现组件动画的效果
				this.animationData = this.animation.export();

			}
		},
		components: {
			star
		}
	}
</script>

<style>
	.scroll-view {
		width: 100%;
		height: 440upx;
	}

	/* 热门超英 */
	.superhero {
		padding-bottom: 10upx;
		margin-bottom: 20upx;
		background: white;
	}

	.superhero-title {
		display: flex;
		padding: 20upx;
		flex-direction: row;
		align-items: center;
	}

	.superhero-title-img {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
	}

	.superhero-title-name {
		font-size: 20px;
		font-weight: 700;
	}

	.superhero-show {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.superhero-item {
		width: 200upx;
	}

	.superhero-items {
		display: flex;
		flex-direction: column;
		margin-left: 20upx;
		justify-content: space-between;
	}

	.superhero-items-img {
		width: 200upx;
		height: 260upx;
	}

	.superhero-items-name {
		width: 200upx;
		font-size: 14px;
		font-weight: 700;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 热门预告 */
	.hot-movies {
		background: white;
	}

	.hot-movies-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 20upx 20upx 20upx;
		justify-content: space-between;
	}

	.hot-movies-item {
		width: 350upx;
		height: 220upx;
		margin-top: 10upx;
	}

	/* 猜你喜欢 */
	.guessULike {
		background: white;
		display: flex;
		flex-direction: column;
	}

	.guessULike-item {
		display: flex;
		padding: 30upx 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.guessULike-item-img {
		width: 180upx;
		height: 240upx;
		border-radius: 3%;
	}

	.guessULike-item-info {
		width: 360upx;
		display: flex;
		flex-direction: column;
	}

	.guessULike-item-title {
		margin-bottom: 10upx;
		font-size: 36upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.guessULike-item-basicInfo,
	.guessULike-item-releaseDate {
		color: grey;
		font-size: 14px
	}

	.guessULike-item-oper {
		width: 140upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: 4upx dashed #dbdbda;
	}

	.guessULike-item-oper-img {
		width: 40upx;
		height: 40upx;
	}

	.guessULike-item-oper-title {
		font-size: 14px;
		color: #feab2a;
	}

	.guessULike-item-oper-num {
		font-size: 14px;
		color: #feab2a;
	}
</style>
